import {uSelectDevParamCheckData} from '@/api/deviceManagement'
import {selectSimpleDevList} from '@/api/public'
import {CCard} from '@/components/card'
import {ProductFilesItem} from '@/components/others/productFilesItem'
import {CnBoldP, CnBoldSpan, CnMediumP, CnNormalP, CnNormalSpan} from '@/components/text'
import {ParamValue} from '@/components/text/paramValue'
import useGlobalAPI from '@/hooks/useGlobalAPI'
import {getUserId} from '@/libs/auth'
import {RouterView} from 'vue-router'
import {DeviceCard} from './components/deviceCard'

export default defineComponent({
  name: 'deviceManagement',
  setup() {
    const {store, route} = useGlobalAPI()
    const state = reactive<{
      dataSource: SimpleDeviceData[]
      spinning: boolean
      currentDev: SimpleDeviceData | undefined
      paramListUpdateFlag: boolean
      paramsData: DeviceManagement.CheckData[]
    }>({
      dataSource: [],
      spinning: false,
      currentDev: undefined,
      paramListUpdateFlag: false,
      paramsData: []
    })

    const paramDataTime = computed(() =>
      state.paramListUpdateFlag
        ? ''
        : state.paramsData.length && state.paramsData[0].checkTime
        ? '时间：' + state.paramsData[0].checkTime
        : '暂无日期'
    )

    const devByCurrentDevId = computed(
      () => state.dataSource.filter(item => item.devId === state.currentDev?.devId)[0]
    )

    function getPageDataSource() {
      const userId = getUserId()
      if (!userId) return
      state.spinning = true
      selectSimpleDevList({userId})
        .then(res => {
          state.dataSource = res.data.sort((a, b) => a.devId - b.devId)
          console.log(state.dataSource)
          state.spinning = false
          state.currentDev = res.data[0]
          getParamsDataByDevId(state.currentDev.devId)
        })
        .catch(err => {
          state.spinning = false
        })
    }

    function getParamsDataByDevId(devId: number) {
      state.paramListUpdateFlag = true
      store.dispatch('layoutMain/MAINSCROLLTOTOP', 'deviceManagementParamDashboard')
      uSelectDevParamCheckData({devId})
        .then(res => {
          state.paramsData = res.data || []
          setTimeout(() => (state.paramListUpdateFlag = false), 500)
        })
        .catch(err => {
          state.paramListUpdateFlag = false
        })
    }

    onMounted(() => {
      getPageDataSource()
    })

    return () =>
      route.path === '/deviceManagement/home' ? (
        <div class=''>
          <CnBoldP class='mt-11 text-20'>设备管理</CnBoldP>

          <CnNormalP class='mt-6 mb-8 text-4xText'>
            查看您的设备的总体情况，对需要的设备进行设置
          </CnNormalP>
          <ProductFilesItem></ProductFilesItem>
          <a-spin spinning={state.spinning}>
            {devByCurrentDevId.value ? (
              <CCard
                id='deviceManagementParamDashboard'
                class='min-h-240 bg-white rounded-4 px-0 py-16 relative'
                title='设备管理-参数面板'
                vein={true}
                v-slots={{
                  title: () => (
                    <div class='flex justify-between items-center'>
                      <CnBoldSpan>{`${state.currentDev?.devName || ''}实时参数`}</CnBoldSpan>
                      <CnNormalSpan>{paramDataTime.value}</CnNormalSpan>
                    </div>
                  )
                }}
              >
                <div class='w-full h-full flex justify-around items-center flex-wrap gap-x-26 gap-y-26 mt-20'>
                  {!state.paramListUpdateFlag && state.paramsData.length ? (
                    state.paramsData.map(item => (
                      <div>
                        <CnMediumP class='text-center text-16'>{item.paramName}</CnMediumP>
                        <div class='text-center'>
                          <ParamValue
                            value={item.paramValue}
                            valueStyle={{
                              fontSize: '48px'
                            }}
                            unit={item.paramUnit}
                            status={item.paramStatus}
                          ></ParamValue>
                        </div>
                        <CnNormalP class='text-center'>
                          {item.standRange ? '合格标准：' + item.standRange : '暂无标准'}
                        </CnNormalP>
                      </div>
                    ))
                  ) : state.paramListUpdateFlag ? (
                    <a-spin spinning={true}></a-spin>
                  ) : !state.paramsData.length ? (
                    '暂无最新记录'
                  ) : null}
                </div>

                <div class='absolute bottom-0 right-26 h-26 flex items-center gap-x-16'>
                  <div class='flex items-center gap-x-4'>
                    <div class='w-8 h-8 rounded-full bg-success'></div>
                    <CnNormalSpan>适宜</CnNormalSpan>
                  </div>
                  <div class='flex items-center gap-x-4'>
                    <div class='w-8 h-8 rounded-full  bg-warning'></div>
                    <CnNormalSpan>偏低</CnNormalSpan>
                  </div>
                  <div class='flex items-center gap-x-4'>
                    <div class='w-8 h-8 rounded-full bg-danger'></div>
                    <CnNormalSpan>偏高</CnNormalSpan>
                  </div>
                </div>
              </CCard>
            ) : null}

            <div class='mt-20 grid grid-cols-3 gap-x-21 gap-y-21'>
              {state.dataSource.map(item => (
                <DeviceCard
                  dev={item}
                  devListData={state.dataSource}
                  currentDevId={state.currentDev?.devId}
                  onActived={currentDev => {
                    state.currentDev = currentDev
                    getParamsDataByDevId(currentDev.devId)
                  }}
                ></DeviceCard>
              ))}
            </div>
          </a-spin>
        </div>
      ) : (
        <RouterView></RouterView>
      )
  }
})
